<%@ page pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>


<link
	href="${pageContext.request.contextPath}/css1/registercss/bootstrap.min.css"
	rel="stylesheet">
<link   
	href="${pageContext.request.contextPath}/css1/registercss/font-awesome.min.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/css1/registercss/animate.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/css1/registercss/style.css"
	rel="stylesheet">
	


<link rel="stylesheet" href="${pageContext.request.contextPath}/js1/iCheck/custom.css" />


</head>
<body class="gray-bg">

	<div class="wrapper wrapper-content">

		<!--  <div class="row">
            <div class="col-sm-12">
                <div class="middle-box text-center animated fadeInRightBig">
                    <h3 class="font-bold">这里是页面内容</h3>

                    <div class="error-desc">
                        您可以在这里添加栅格，参考首页及其他页面完成不同的布局
                        <br/><a href="#" class="btn btn-primary m-t">打开主页</a>
                    </div>
                </div>
            </div>
        </div> -->

		<div class="col-sm-12 animated fadeInDown">
			<div class="tabs-container">
				<ul class="nav nav-tabs">
					<li class="active"><a data-toggle="tab" href="#tab-1"
						aria-expanded="true">登录人员信息</a></li>
					<li class=""><a data-toggle="tab" href="#tab-2"
						aria-expanded="false">展示所有库管信息</a></li>
					<li class=""><a style="padding-bottom: 0px; padding-top: 3px;"><span
							class="btn btn-primary btn-sm" onclick="showAddPop()">添加用户</span></a></li>
				</ul>
				<div class="tab-content">
					<div id="tab-1" class="tab-pane active">
						<div class="panel-body">
							<div class="col-sm-12">
								<div class="ibox float-e-margins" style="position: relative">
									<div class="">
										<div class="row">
											
											<div class="col-sm-4 m-b-xs"></div>
											<div class="col-sm-3">
												
											</div>
										</div>
										<br />
										
										<div class="table-responsive">
											<table class="table table-striped table-bordered">
												<thead>
													<tr>
														<th>ID</th>
														<th>账号</th>
														<th>密码</th>
														<th>邮箱</th>
														<th>电话</th>
														<th>生日</th>
														<th>性别</th>
														<th>地址</th>
														<th>其他</th>
													</tr>
												</thead>
												<tbody id="admin">
													<tr>
														<th>${user_tb.user_id}</th>
														<th>${user_tb.user_name}</th>
														<th>${user_tb.password}</th>
														<th>${user_tb.email}</th>
														<th>${user_tb.telephone}</th>
														<th>${user_tb.brithday}</th>
														<th>${user_tb.gender}</th>
														<th>${user_tb.address}</th>
														<th>${user_tb.remark}</th>
													</tr>
												</tbody>
											</table>
											<div id="admin-page"style="position: absolute; right: 0px; bottom: -20px;">
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
					<div id="tab-2" class="tab-pane">
						<div class="panel-body">
							<div class="col-sm-12">
								<div class="ibox float-e-margins">
									<div class="">
										<div class="row">
											<div class="col-sm-5 m-b-xs">
												每页显示 <select class="input-sm input-s-sm inline"
													id="storehouse-select" style="width: 60px">
													<option value="5">5</option>
													<option value="10">10</option>
													<option value="20">20</option>
													<option value="50">50</option>
												</select> 条
											</div>
											<div class="col-sm-4 m-b-xs"></div>
											<div class="col-sm-3">
												<div class="input-group">
													<input type="text" placeholder="请输入关键词" id="storehouse-search"
														class="input-sm form-control"> <span
														class="input-group-btn">
														<span class="btn btn-sm btn-primary" onclick="searchstorehouse()"> 搜索</span>
													</span>
												</div>
											</div>
										</div>
										<br />
										<div class="table-responsive">
											<table class="table table-striped table-bordered">
												<thead>
													<tr>
														<th><input type="checkbox" class="i-checks"
															id="storehouseCheck"></th>
													    <td>头像</td>
														<th>姓名</th>
														<th>邮箱</th>
														<th>电话</th>
														<th>生日</th>
														<th>性别</th>
														<th>地址</th>
														<th>备注</th>
														<th>操作</th>
													</tr>
												</thead>
												<tbody id="storehouse">

												</tbody>
											</table>
											<div class="btn btn-primary btn-sm"  onclick="deletestorehouseSelete()">删除所选</div>
											<div id="storehouse-page" style="position: absolute;right: 0px;bottom: -20px;">
												  
											</div>
										</div>

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 全局js -->
	<script
		src="${pageContext.request.contextPath}/js1/registerjs/jquery.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/js1/registerjs/bootstrap.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/js1/registerjs/jquery.metisMenu.js"></script>
	<script
		src="${pageContext.request.contextPath}/js1/registerjs/jquery.slimscroll.min.js"></script>
	
	<script
		src="${pageContext.request.contextPath}/js1/registerjs/layer-v3.1.1/layer/layer.js"></script>

	<!-- 自定义js -->
	<script src="${pageContext.request.contextPath}/js1/registerjs/hplus.js"></script>
	<script 
		src="${pageContext.request.contextPath}/js1/registerjs/contabs.js"></script>

	<!-- 第三方插件 -->

	<script src="${pageContext.request.contextPath}/js1/iCheck/icheck.min.js"></script>
	
	<script src="${pageContext.request.contextPath}/js1/registerjs/pace.min.js"></script>

		<script src="${pageContext.request.contextPath}/js1/jquery-bootstrap-pagination/jquery-bootstrap-pagination.js"></script>
		
		<script src="${pageContext.request.contextPath}/js1/Huploadify-master/jquery.Huploadify.js"></script>
</body>
<script>
	

	$('#storehouse-select').change(function(){
		$('#storehouse-page').html('<div style="text-align:right"></div>');
		$.get('${pageContext.request.contextPath}/User_TbServlet/listAllByRolePagination',{'role':'storehouse','pageSize':$('#storehouse-select').val(),'pageNum':1},function(data){
			format2(data['userList'],'storehouse');
			$('#storehouse-page').children('div').pagination({
				  total_pages: data['pageCount'],
				  current_page: data['pageNum'],
				  prev: "上一页",
				  next: "下一页",
				  callback: function(event, page) {
					  updateTable('storehouse',page); 
				  }
				});
		},'json');	
	});
	
	function loadData(role,pageNum){
		$('#'+role+'-page').html('<div style="text-align:right"></div>');
	 	$.get('${pageContext.request.contextPath}/User_TbServlet/listAllByRolePagination',{'role':role,'pageSize':$('#'+role+'-select').val(),'pageNum':pageNum},function(data){
			format2(data['userList'],role); 
		 	 $('#'+role+'-page').children('div').pagination({
				  total_pages: data['pageCount'],
				  current_page: data['pageNum'],
				  prev: "上一页",
				  next: "下一页",
				  callback: function(event, page) {
					  updateTable(role,page); 
				  }
				}); 
		},'json'); 
	}
	function updateTable(role,pageNum){
	 	$.get('${pageContext.request.contextPath}/User_TbServlet/listAllByRolePagination',{'role':'storehouse','pageSize':$('#storehouse-select').val(),'pageNum':pageNum},function(data){
			format2(data['userList'],role); 
		},'json'); 
	}
	//ajax发请求查找所有库管:
	 loadData("storehouse",1);  
	//格式化数组，把数组塞到表格
	function format2(data,role){
	//清空tbody:
	 $('#'+role).empty(); 
 	for( i in data){
		 var obj = $('<tr>').append('<td><input type="checkbox" class="i-checks '+role+'" value="'+data[i]['user_id']+'"></td>');
		 obj = obj.append('<td><img src="${pageContext.request.contextPath}'+data[i]['head']+'" width="30" style="border-radius:100%" /></td>');
		 obj = obj.append('<td>'+data[i]['user_name']+'</td>');
		 obj = obj.append('<td>'+data[i]['email']+'</td>');
		 obj = obj.append('<td>'+data[i]['telephone']+'</td>');
		 obj = obj.append('<td>'+data[i]['brithday']+'</td>');
		 obj = obj.append('<td>'+data[i]['gender']+'</td>');
		 obj = obj.append('<td>'+data[i]['address']+'</td>');
		 obj = obj.append('<td>'+data[i]['remark']+'</td>');
		 obj = obj.append('<td><span style="cursor:pointer" onclick="updataThis('+data[i]['user_id']+',\''+role+'\')"><i class="fa fa-eyedropper"></i></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="cursor:pointer" onclick="deleteThis('+data[i]['user_id']+',\''+role+'\')"><i class="fa fa-close text-danger"></i></span></td>');
		 obj = obj.append('</tr>');
		$('#'+role).append(obj);
	}	 
	//原有插件代码复制。更改checkbox样式
	$('.i-checks').iCheck({
		checkboxClass : 'icheckbox_square-green',
		radioClass : 'iradio_square-green',
	});
	//icheck回调：
	$('#storehouseCheck').on('ifChecked', function(event){
		  $('input:checkbox.storehouse').iCheck('check');
	});
	$('#storehouseCheck').on('ifUnchecked', function(event){
		$('input:checkbox.storehouse').iCheck('uncheck');
	});
	}
	
	//通过id删除所选用户
	function deleteThis(user_id,role) {
			if (confirm('确定删除此用户吗？')) {
				$.get("${pageContext.request.contextPath}/User_TbServlet/deleteById",{'user_id':user_id},function(data){
					if (data) {
						layer.msg("删除成功")
						//ajax发请求查找所有库管:
						loadData("storehouse",1);
					}else{
						layer.msg("删除失败")
					}
				})
			}
	}
	function deletestorehouseSelete() {
		var flag=false;
		$('input:checkbox.storehouse').each(function() {
			if ($(this).prop('checked')) {
				flag=true;
			}
		});
		if (!flag) {
			layer.msg("至少选择一个");
			return;
		}
		if (confirm('确定删除此用户吗？')) {
			var u_ids=[];
			$('input:checkbox.storehouse').each(function() {
				//把被选中的复选框的值放到u_ids数组里
				if ($(this).prop('checked')) {
					u_ids.push($(this).val());
				}
			});
			$.get("${pageContext.request.contextPath}/User_TbServlet/deleteAll",{'u_ids':JSON.stringify(u_ids)},function(data){
				if (data) {
					
					layer.msg("删除成功")
					//ajax发请求查找所有库管:
					loadData("storehouse",1);
				}else{
					layer.msg("删除失败")
					}
				
			})
		}
	}
	
	//搜索：
	function searchstorehouse(){
		$.get('${pageContext.request.contextPath}/User_TbServlet/listAllByRoleSearchPagination',{'role':'storehouse','pageSize':$('#storehouse-select').val(),'pageNum':1,'search':$('#storehouse-search').val()},function(data){
			format2(data['userList'],'storehouse');
			$('#storehouse-page').html('<div style="text-align:right"></div>');
			$('#storehouse-page').children('div').pagination({
				  total_pages: data['pageCount'],
				  current_page: data['pageNum'],
				  prev: "上一页",
				  next: "下一页",
				  callback: function(event, page) {
					  updateStudentTableSearch(page); 
				  }
			});
		},'json');	
	}
 	function updateStudentTableSearch(page){
 		$.get('${pageContext.request.contextPath}/User_TbServlet/listAllByRoleSearchPagination',{'role':'storehouse','pageSize':$('#storehouse-select').val(),'pageNum':page,'search':$('#storehouse-search').val()},function(data){
			format2(data['userList'],'storehouse');
		},'json');
	} 
 	
	
	
 	//弹出添加表单框:
 	function showAddPop(){
 	 parent.layer.open({
	 			type:2,
	 			content:['${pageContext.request.contextPath}/User_TbServlet/preAbb'],
	 			area:['65%','75%'],
	 			offset:['10%','20%'],
	 			/* fix: false, */
	 			
	 		});

	 }
	//弹出修改表单框:
	function updataThis(data,role){
	 	 parent.layer.open({
		 			type:2,
		 			content:['${pageContext.request.contextPath}/User_TbServlet/preedit?data='+data+"&"+"role="+role],
		 			area:['65%','75%'],
		 			offset:['10%','20%'],
		 			/* fix: false, */
		 		});
		 }

</script>


</html>